<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import deviceview from './module/deviceview.vue';
import mapview from './module/mapview.vue';
import videoview from './module/videoview.vue';
import { getAirportById } from '#/api/daping/airport';

const router = useRouter();
let airport_id;
let airport_info = ref({});
let airport_loading = ref(false)
const backbage = () => {
  // router.go(-1)
  smartNavigate()
}
const smartNavigate = (fallbackPath = '/airportdeployment') => {
  if (window.history.state.back) {
    router.go(-1);
  } else {
    router.replace(fallbackPath);
  }
};
const get_info = async () => {
  airport_loading.value = true
  try {
    const { data } = await getAirportById({ id: airport_id });
    airport_loading.value = false
    airport_info.value = data
  } catch (err) {
    console.log(err)
    airport_loading.value = false
    ElMessage.error('加载数据失败');
  }
}
if (history.state.id) {
  airport_id = history.state.id
  get_info();
}
// 定义接口数据结构
interface MapData {
  lnglat: [number, number][];
  distances: number;
  ing: Boolean
}

const data_for_map = reactive<MapData>({
  lnglat: [],
  distances: 0,
  ing: false
});
const map_to_data = (data: Partial<MapData>): void => {
  try {
    const processedData = {
      lnglat: data.lnglat ?? [],
      distances: data.distances ?? 0,
      ing: data.ing
    };

    Object.assign(data_for_map, processedData);

    calldeviceMethod();
  } catch (error) {
    console.error('Error processing map data:', error);
  }
};
const calldeviceMethod = () => {
  if (deviceref.value) {
    // 5. 调用子组件暴露的方法并传参
    deviceref.value.childMethod(data_for_map)
  }
}
const flymethod = ref();
const data_to_map = (data) => {
  // flymethod.value = data.method;
  if (mapref.value) {
    if (data.type == 'osd_info_push') {
      mapref.value.childMethod(data)
    } else {
      flymethod.value = data.method
      mapref.value.childMethod2(data)
    }
  }
}
const mapref = ref(null)
const deviceref = ref(null)
const backdata = (data) => {
  flymethod.value = data.method
}

// const operation = ref({
//   cameraType: 'zoom',
//   zoomFactor: 0,
//   locked: true,
//   pitchSpeed: 0,
//   yawSpeed: 0
// })
const video_to_device = (data) => {
  // Object.assign(operation.value, data)
  if (deviceref.value) {
    deviceref.value.childMethod2(data)
  }
}
const video_to_device2 = (data) => {
  // Object.assign(operation.value, data)
  if (deviceref.value) {
    deviceref.value.childMethod3(data)
  }
}
const videoref = ref(null)
const data_to_video = (data) => {
  if (videoref.value) {
    videoref.value.setVideoData(data)
  }
}
const data_to_videoSpeak = (data) => {
  if (videoref.value) {
    videoref.value.setvideoSpeak(data)
  }
}

const airInfo = reactive({})
const data_to_info = (data: Object) => {
  Object.assign(airInfo, data.info)
}

const to_anyFunction = (data) => {
  if (deviceref.value) {
    deviceref.value.anyFunction(data)
  }
}


// 禁用右键菜单
const onContextMenu = (event) => {
  event.preventDefault();
};
</script>
<template>
  <div class="control-management" @contextmenu.prevent="onContextMenu">
    <div class="air" v-loading="airport_loading">
      <div class="left-box" v-if="!airport_loading">
        <mapview ref="mapref" :device-data="airport_info" @send-data="map_to_data" />
      </div>
      <div class="right-box" v-if="!airport_loading">
        <div class="video-box">
          <!-- <div class="video-box" ref="draggable"> -->
          <!-- <div class="video-box-left">
            <div class="video_type">
              <div class="video_type_item" v-for="item in videoTypes" :key="item.value"
                :class="{ choice: video_type_item_choice === 'zoom', clock: video_type_item_clock }"
                @click="choice_video_type(item.value)">
                {{ item.label }}
              </div>
            </div>
          </div>
          <div class="video-box-center">
          </div>
          <div class="video-box-right"></div> -->
          <videoview ref="videoref" :device-data="airport_info" :fly-method="flymethod" @send-data="video_to_device"
            :airInfo="airInfo" @getanyFunction="to_anyFunction" @working="video_to_device2" />
        </div>
        <div class="device-box" v-if="!airport_loading">
          <deviceview ref="deviceref" :device-data="airport_info" @send-data="data_to_map" @send-data2="backdata"
            @send-data3="data_to_video" @datatovideoSpeak="data_to_videoSpeak" @send-info="data_to_info" />
        </div>
      </div>
    </div>
    <div class="back-button" @click="backbage"></div>
  </div>
</template>

<style lang="scss" scoped>
.control-management {
  width: 100%;
  height: calc(92vh);
  padding: 0;
  padding-top: 4vh;
  // background: #929292;
  background-image: url('../../../../assets/jcbs_bg.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;

  // background-image: url('../../../assets/u5962.jpg');
  //   background-repeat: no-repeat;
  //   background-size: 100%;
  .back-button {
    position: absolute;
    top: 0.5vh;
    right: 1vh;
    width: 12vh;
    // height: 26px;
    height: 4vh;
    background-image: url('../../../../assets/back.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}

.air {
  display: flex;
  width: 100%;
  height: 100%;

  .left-box {
    width: 35%;
    height: 100%;
    background-color: #022021;
  }

  .right-box {
    width: calc(65% - 1vh);
    height: 100%;
    margin-left: 1vh;
    background-color: #022021;

    .video-box {
      width: 100%;
      height: 70%;
      position: relative;

      // .video_type {
      //   position: absolute;
      //   right: 0;
      //   top: 40%;

      //   .video_type_item {
      //     font-size: 1.8vh;
      //   }

      //   .choice {}

      //   .clock {}
      // }
    }

    .device-box {
      width: 100%;
      height: 30%;
    }
  }
}
</style>
